<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <div>
      <div>
        <span class="title">我的频道</span>
        <van-button
          @click="isShow = !isShow"
          style="float: right"
          size="mini"
          type="danger"
          plain
          >{{ isShow ? '取消' : '编辑' }}</van-button
        >
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownChannels" :key="item.id">
          <template>
            <span
              @click="changeActive(index)"
              :class="{ active: index == active }"
              style="font-size: 14px"
              >{{ item.name }}</span
            >

            <!-- 
              要isShow为true并且不能是推荐
             -->
            <van-icon
              @click="del(index)"
              v-show="isShow && item.name != '推荐'"
              class="close-icon"
              name="cross"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 可选频道 -->
    <div style="margin-top: 20px">
      <div>
        <span class="title">可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in optChannels"
          :key="item.id"
          :text="item.name"
          @click="add(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
// 导入接口
import { setChannelsAPI } from '@/api'

export default {
  model: {
    prop: 'active',
    event: 'changeIndex'
  },

  props: {
    // 接收父组件传递过来的下标，只不过我把名字叫成value
    active: {
      type: Number,
      required: true
    },
    ownChannels: {
      // 限制传递的数据类型
      type: Array,
      // 限制必须要传递
      required: true
    },

    allChannels: {
      // 限制传递的数据类型
      type: Array,
      // 限制必须要传递
      required: true
    }
  },

  data() {
    return {
      isShow: false
    }
  },

  methods: {
    // 可选频道的点击事件
    add(item) {
      // 1. 先把它加到数组里
      this.ownChannels.push(item)

      // 2. 判断是否登录
      this.save()

    },
    del(index) {
      // 根据下标从我的频道数组里删除
      this.ownChannels.splice(index, 1)

      this.save()

      // 判断删除的是不是前面的下标
      if (index < this.active) {

        this.$emit('fixActive')
      }
    },

    async save () {

       // 2. 判断是否登录
      if (this.$store.state.tokenObj.token) {
        // 先把 我的频道 数组改造成一个新的数组，新的数组里每个元素是一个对象
        // 对象要有id和seq，seq就是顺序，我们就用下标即可
        const channels = this.ownChannels.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        // 发请求即可
        await setChannelsAPI({
          channels
        })
      } else {
        // 没登录，就保存到本地存储
        window.localStorage.setItem(
          'HMTT81_CHANNELS',
          JSON.stringify(this.ownChannels)
        )
      }
    },

    // 点击我的频道调用的事件
    changeActive(index) {
      // 不能对父组件传递过来的数据进行重新赋值
      // 破坏了单向数据流
      // this.value = index

      // 就该子传父 ($emit)
      this.$emit('changeIndex', index)

      // 再通知父组件一个事件
      this.$emit('close')
    }
  },

  computed: {
    optChannels() {
      // // 用所有频道到过滤掉我的频道，留下剩余频道就是我的频道
      // return this.allChannels.filter(
      //   (v) =>
      //     // 判断v是否在我的频道里（判断v.id如果跟我的频道里某个数据的id一样，就代表在里面）
      //     // 不在我的频道里，才取出来，所以要取反
      //     !this.ownChannels.find((val) => val.id === v.id)
      // )

      // 用普通遍历也可以做
      let list = []
      this.allChannels.forEach((v) => {
        // 判断所有频道里的每一项是否在我的频道里，在就不要，不在就要
        let res = this.ownChannels.find((val) => val.id === v.id)

        if (!res) {
          list.push(v)
        }
      })

      return list
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 0 20px;

  .title {
    font-size: 14px;
  }

  .close-icon {
    font-size: 12px;
    position: absolute;
    right: 2px;
    top: 2px;
  }

  .active {
    color: red;
  }
}
</style>
